<template>
	<view :class="themeName">
		<!-- 提示 -->
		<u-notice-bar :list="noticeList"></u-notice-bar>

		<!-- 申请售后头部商品 -->
		<view class="m-t-20 bg-white flex p-24 p-l-30" v-for="item,idx in goodsData" :key="idx">
			<u-checkbox @change="checkboxChange(idx)" v-model="item.checked"></u-checkbox>
			<view class="flex" style="width: 100%;">
				<u-image :src="item.goods_image" width="160rpx" height="160rpx" mode="aspectFill"></u-image>
				<view class="m-l-12" style="width: 100%;">
					<view class="nr line-2 m-b-10">
						{{ item.goods_name }}
					</view>
					<view class="xs muted">
						{{ item.spec_value_str }}
					</view>
					<view class="m-t-10 flex row-between">
						<price :content="item.goods_price" mainSize="32rpx" minorSize="24rpx"
							:prefix="orderArr.price_symbol" />
						<view>
							<u-number-box v-model="item.goods_num" :max="item.goods_max_num" async-change
								positiveInteger :size="36" />
							<text class="lighter sm m-l-10">{{item.unit_desc}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 售后方式选择 -->
		<view class="bg-white m-t-24">
			<view class="flex row-between p-t-24 p-b-24 p-r-20 p-l-20 bb" :class="[{choose:refund_method==1}]"
				@click="getAfterReason(1)">
				<view>
					<view class="md normal">{{$zhTran('仅退款')}}</view>
					<view class="xs muted m-t-10">{{$zhTran('未收到货，与卖家协商同意无需退货只需退款')}}</view>
				</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
			<view class="flex row-between p-t-24 p-b-24 p-r-20 p-l-20" :class="[{choose:refund_method==2}]"
				@click="getAfterReason(2)">
				<view>
					<view class="md normal">{{$zhTran('退货退款')}}</view>
					<view class="xs muted m-t-10">{{$zhTran('已收到货，需退还收到的实物')}}</view>
				</view>
				<u-icon name="arrow-right" size="22"></u-icon>
			</view>
		</view>

		<view class="bg-white m-t-24" v-if="refund_method > 0">
			<view class="p-t-24 p-l-15">
				<view class="flex row-between bb p-b-24">
					<text class="nr normal">{{$zhTran('数量')}}</text>
					<text class="p-r-20">{{ goods_num }}</text>
				</view>
			</view>
			<view class="p-t-24 p-l-15">
				<view class="flex row-between bb p-b-24">
					<view class="nr normal">{{$zhTran('退款金额')}}</view>
					<!-- <u-input type="number" v-model="refund_money" input-align="right" :clearable="false"
						class="m-r-20"></u-input> -->
					<price class="m-r-20" :content="refund_money" color="#FF2C3C" mainSize="28rpx" minorSize="26rpx"
						:prefix="orderArr.price_symbol"></price>
				</view>
			</view>
			<view class="p-t-24 p-l-15" @click="showPop = true">
				<view class="flex row-between bb p-b-24">
					<view class="nr normal">{{$zhTran('退款原因')}}</view>
					<view class="m-r-20">
						<text class="p-r-15 muted nr">{{ reasonIndex }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>

			<view class="p-t-24 p-l-15">
				<view class="flex row-between col-top bb p-b-24">
					<view class="nr normal flex-none">{{$zhTran('退款说明')}}</view>
					<view class="m-r-20 flex-1 m-l-20">
						<textarea class="bg-body" style="width: 100%;" :placeholder="$zhTran('请描述申请售后的具体原因，100字以内')"
							v-model="remark" name="textarea"></textarea>
					</view>
				</view>
			</view>

			<view class="p-t-24 p-l-15 p-b-44">
				<view class="flex row-between p-b-24">
					<view class="nr normal">{{$zhTran('上传凭证')}}</view>
					<view class="m-r-12 muted nr">
						{{$zhTran('（选填，最多可上传3张）')}}
					</view>
				</view>

				<uploader v-model="fileList" mutiple :deletable="true" preview-size="160rpx" :maxUpload="3"
					image-fit="aspectFill" />
			</view>
		</view>

		<view v-if="refund_method !== 0" class="post-btn flex row-center br60 lg white" @click="applyRefundFun">
			{{$zhTran('申请退款')}}
		</view>

		<u-popup id="popup" v-model="showPop" border-radius="14" mode="bottom" :closeable="true">
			<view class="bg-white">
				<view class="pop-header flex row-center md normal">
					{{$zhTran('退款原因')}}
				</view>
				<scroll-view style="height: 800rpx" :scroll-y="true">
					<radio-group @change="radioChange" class="m-t-20">
						<label v-for="(item, index) in reasonArr" :key="index" class="reason-item flex row-between"
							@click="showPop = false">
							<view class="reason-desc nr">
								{{ item }}
							</view>
							<radio style="transform: scale(.7);" color="#FF2C3C" :value="index + ''"
								:checked="reasionChoose == index+''"></radio>
						</label>
					</radio-group>
				</scroll-view>
			</view>
		</u-popup>
		<!-- <w-jishuzhichi class="jishuzhichi-nodata" /> -->
	</view>
</template>

<script>
	import {
		apiAfterSaleGoods,
		apiAfterSaleReason,
		apiAfterSalePost
	} from "@/api/order.js";
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				noticeList: [this.$zhTran('订单所产生的运费，如已经发货的订单平台是不予退回的，请谨慎操作！')],
				id: 1,
				current: 0, //选择原因的索引
				refund_method: 0, //是否显示售后方式选择
				showPop: false, //显示退货退款原因弹窗
				reasonIndex: this.$zhTran('请选择退款原因'), //退货退款原因数据
				remark: '', //  备注退款原因
				refund_money: 0,
				fileList: [], //上传凭证
				orderArr: {},
				orderInfo: {},
				goodsData: [],
				reasonArr: [],
				reasionChoose: ''
			}
		},

		onLoad() {
			const options = this.$Route.query
			this.id = options.id
			this.getAfterSaleGoods();
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},
		computed: {
			goods_num() {
				var backdata = this.goodsData.filter(item => item.checked == true),
					num = 0
				this.refund_money = 0;
				backdata.forEach(item => {
					num += Number(item.goods_num)
					this.refund_money += Number(item.goods_price) * Number(item.goods_num)
				})
				return num
			}
		},
		methods: {
			// 获取商品自订单商品
			getAfterSaleGoods() {
				apiAfterSaleGoods({
					order_id: this.id,
				}).then(res => {
					this.orderArr = this.$zhTran(res)
					this.orderInfo = this.orderArr.order
					this.goodsData = this.orderArr.goods
				})
			},
			getAfterReason(methods) {
				this.refund_method = methods
				this.reasionChoose = ''
				apiAfterSaleReason({
					refund_method: methods
				}).then(res => {
					this.reasonArr = this.$zhTran(res.reason)
					this.reasonIndex = this.$zhTran('请选择退款原因')
				})
			},

			// 选择退款原因
			radioChange(event) {
				this.reasionChoose = event.detail.value
				this.reasonIndex = this.reasonArr[event.detail.value]
			},
			checkboxChange(idx) {
				var data = this.goodsData[idx]
				this.goodsData[idx].checked = !data.checked

				var backdata = this.goodsData.filter(item => item.checked == true)
				this.refund_money = 0;
				backdata.forEach(item => {
					this.refund_money += Number(item.total_pay_price)
				})
			},

			// 提交售后
			applyRefundFun() {
				if (this.reasonIndex == this.$zhTran('请选择退款原因')) {
					return this.$toast({
						title: this.$zhTran('请选择退款原因')
					});
				}

				var backdata = this.goodsData.filter(item => item.checked == true),
					order_goods_arr = []
				backdata.forEach(item => {
					order_goods_arr.push({
						id: item.order_goods_id,
						goods_num: item.goods_num,
						goods_price: item.goods_price,
						refund_money: Number(item.goods_price) * Number(item.goods_num)
					})
				})

				apiAfterSalePost({
					refund_money: this.refund_money,
					refund_remark: this.remark,
					refund_method: this.refund_method,
					refund_reason: this.reasonIndex,
					order_id: this.id,
					order_goods_arr,
					voucher: this.fileList,
					clsp_id: Cache.get('clsp_id'),
				}).then(res => {
					uni.redirectTo({
						url: `/bundle/pages/after_sale/after_sale`
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.bb {
		border-bottom: 1rpx solid #F2F2F2;
	}

	textarea {
		flex: 1;
		height: 172rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.pop-header {
		line-height: 42rpx;
		padding: 30rpx;
	}

	.reason-item {
		padding: 20rpx;

		.reason-desc {
			line-height: 46rpx;
		}
	}

	.post-btn {
		height: 84rpx;
		margin: 40rpx 24rpx 0 24rpx;
		@include background_color();
	}

	.choose {
		background-color: #ddd;
	}
</style>